﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title>品名列表</title>
    @Html.Css("main", "flexigrid", "form", "list")
</head>
<body>
    <div class="listContainer">
        <!--标题栏-->
        <div class="header">
            <span class="title">品名列表</span>
        </div>
        <!--工具栏-->
        <div class="toolbar">
            <!--新增按钮-->
            <a class="tbbtn" onclick="alert('新增');" href="javascript:void(0);"><span class="Add">
                新增</span></a>
            <!--删除按钮演示 获取Grid中选中的项-->
            <a class="tbbtn" onclick="alert('批量删除');" href="javascript:void(0);"><span class="delete">
                删除</span></a>
            <!--分割符-->
            <span class="separtor"></span>
            <div class="queryArea">
                <!--快速查询-->
                <input type="text" id="querytext" class="querytext" alt="请输入商品名称" />
                <a href="javascript:void(0);" id="btnClearQuery" style="display: none"><span class="clearquery">
                    &nbsp; </span></a><a href="javascript:void(0);" id="btnQuickQuery"><span class="usequery">
                        &nbsp;</span></a>
                <!--高级查询-->
                <a href="javascript:void(0);" class="btnqd" id="btnQuerydown"><span class="querydown">
                    高级搜索</span></a>
            </div>
        </div>
        <!--这里是高级查询区域-->
        <div id="advQueryPanel" class="advQuery">
            <table cellpadding="3" cellspacing="0" width="280px">
                <tr>
                    <td colspan="2">
                        <div id="tagpanel">
                            <!-- 标签 -->
                            <span class="tag"><a href="javascript:void(0);">商品名包含'油'</a>
                                <input type="hidden" value="[{name:'ProductName',value:'油'}]" /></span>
                            <!-- 标签 -->
                            <span class="tag"><a href="javascript:void(0);">康富食品的调味品</a>
                                <input type="hidden" value="[{name:'CategoryID',value:'2'},{name:'SupplyID',value:'2'}]" /></span>
                            <!-- 标签 -->
                            <span class="tag"><a href="javascript:void(0);">特制品</a>
                                <input type="hidden" value="[{name:'CategoryID',value:'7'}]" /></span>
                        </div>
                    </td>
                </tr>
                <form>
                <tr>
                    <td class="firsttd">
                        商品名称:
                    </td>
                    <td>
                        <input id="ProductName" name="ProductName" style="width: 90%; height: 18px;" type="text" />
                    </td>
                </tr>
                <tr>
                    <td class="firsttd">
                        商品分类:
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td class="firsttd">
                        供应商:
                    </td>
                    <td>
                    </td>
                </tr>
                </form>
                <tr>
                    <td>
                    </td>
                    <td>
                        <a id="btnAdvQuery" class="button" href="javascript:void(0);"><span>查 询</span></a>
                        <a id="btnAdvCancel" class="button" href="javascript:void(0);"><span>关 闭</span></a>
                    </td>
                </tr>
            </table>
        </div>
        <!--GridView区域-->
        <table id="FlexiGrid_69cccbef11cb4319b4c5395680946039" class="flexigrid" style="display: none;">
        </table>
    </div>
    @Html.Js("jquery", "common", "flexigrid2", "list")
    <script type="text/javascript">
        function getFlexiGridOptions() {
            var opts = {
                url: '/Material/List',
                usepager: true,
                sortname: 'Id',
                sortorder: 'Asc',
                showcheckbox: true,
                selectedonclick: true,
                qtype: 'Code,Name',
                searchitems: [],
                buttons: [
                    { displayname: '新建', title: '新建', bclass: 'Add', url: '/Material/Edit', onpress: OpenFormDialog, name: 'Add' },
                    { displayname: '显示/隐藏搜索条', title: '显示/隐藏搜索条', bclass: 'query', onpress: ShowOrHide, name: 'Query' }
                ],
                colModel: [
                    { name: 'Id', width: 100, iskey: true, sortable: true, align: 'Center', hide: true, display: 'Id' },
                    { name: 'Code', width: 60, sortable: true, align: 'Center', display: '品名编号' },
                    { name: 'Name', width: 200, sortable: true, align: 'Center', display: '品名名称' },
                    { name: 'Category$MaterialCategory', width: 80, sortable: true, display: '品名大类' },
                    { name: 'Category', width: 80, sortable: true, hide: true, display: '品名大类' },
                    { name: 'Specification$MaterialSpec', width: 60, sortable: true, align: 'Center', display: '品名规格' },
                    { name: 'Specification', width: 60, sortable: true, align: 'Center', hide: true, display: '品名规格' },
                    { name: 'Unit$MaterialUnit', width: 60, sortable: true, align: 'Center', display: '品名单位' },
                    { name: 'Unit', width: 60, sortable: true, align: 'Center', hide: true, display: '品名单位' },
                    { name: 'CurrentPrice', width: 60, sortable: true, align: 'Right', display: '市场价格' },
                    { name: 'ActualSorage', width: 60, sortable: true, align: 'Right', display: '实际库存' },
                    { name: 'SafeStorage', width: 60, sortable: true, align: 'Right', display: '安全库存' },
                    { name: 'RawMaterialId$Material', width: 100, sortable: true, align: 'Center', display: '所属原材料' },
                    { name: 'RawMaterialId', width: 100, sortable: true, align: 'Center', hide: true, display: '所属原材料' },
                    { name: 'ProcessRate', width: 40, sortable: true, align: 'Right', display: '加工率' },
                    { name: 'Id', width: 120, sortable: true, align: 'Center', process: function (div, id, row) {
                        var cell = $('<span>' + div + '</span>');
                        cell.html("").append('<a class="imgbtn2" href=\\\'/Material/Edit/${id}\\\' target=\\\'dialog\\\' title=\\\'品名（${name}）\\\' rel=\\\'Edit-${id}\\\' width=\\\'790\\\' height=\\\'350\\\'><span class="edit" title="编辑">编辑</span></a> <a class="imgbtn2" href=\\\'/Material/Delete/${id}\\\' target=\\\'ajaxTodo\\\' title=\\\'确定要删除 品名（${name}） 吗?\\\'><span class="delete" title="删除">删除</span></a>', row);
                        ; return cell.html();
                    },
                        display: '操作'
                    }
                ]
            };
            return opts;
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var flexigridOptions = getFlexiGridOptions();
            var maiheight = document.documentElement.clientHeight;
            var mainWidth = document.documentElement.clientWidth - 2; // 减去边框和左边的宽度
            var otherpm = 111;
            var gh = maiheight - otherpm;
            flexigridOptions.height = gh;
            flexigridOptions.width = mainWidth;
            $("table.flexigrid").flexigrid(flexigridOptions);
        });

        /**
        * 新增通用的打开表单Dialog窗口
        */
        function OpenFormDialog(name, grid) {
            //            var btn = $(grid).find("div[name='" + name + "']")[0];
            //            $.pdialog.open(btn.url, btn.name, btn.title, $.extend({ width: 790, height: 350 }, btn.options));
        }

        function Query() {
            //            var p = $("form", navTab.getCurrentPanel()).serializeArray();
            //            $("table.flexigrid", navTab.getCurrentPanel()).flexOptions({ extParam: p }).flexReload();
            //            return false;
        }

        function ShowOrHide() {
            //            var p = $("div.querypanel", navTab.getCurrentPanel());
            //            if (p.is(":hidden")) {
            //                p.show();
            //            }
            //            else {
            //                p.hide();
            //                $("form", navTab.getCurrentPanel())
            //            }
        }
      
    </script>
</body>
</html>
